<template>
  <div style="display: flex; justify-content: space-between; align-items: center">
    <a @click="goOut"><< 返回审单明细列表</a>
    <a-button type="primary" @click="loadData">刷新</a-button>
  </div>
  <a-spin :spinning="infoLoading">
    <a-descriptions style="margin-top: 20px;">
      <a-descriptions-item :span="1" label="销售平台">{{info.site + ' / ' + info.platform}}</a-descriptions-item>
      <a-descriptions-item :span="1" label="易仓订单">{{info.saleOrderCode}}</a-descriptions-item>
      <a-descriptions-item :span="1" label="平台订单">{{info.orderId}}</a-descriptions-item>
      <a-descriptions-item :span="1" label="状态">{{info.status + '-' + info.statusName}}</a-descriptions-item>
      <a-descriptions-item :span="1" label="下单时间">{{info.dateCreatePlatform}}</a-descriptions-item>
      <a-descriptions-item :span="1" label="收货地址">
        {{info.shippingAddressInfo?.shippingCountry + ' / ' + info.shippingAddressInfo?.shippingRegion  + ' / ' + info.shippingAddressInfo?.shippingCity + ' / ' + info.shippingAddressInfo?.shippingPostcode}}
      </a-descriptions-item>
      <a-descriptions-item :span='3' label="客服备注">{{info.customerServiceNote}}</a-descriptions-item>
      <a-descriptions-item :span="3" label="系统备注">{{info.systemNode}}</a-descriptions-item>
    </a-descriptions>
  </a-spin>
  <a-popconfirm
      title="是否全部清除并重新审单?"
      ok-text="是"
      cancel-text="否"
      @confirm="confirm"
  >
    <a-button type="primary">全部清除并重新审单</a-button>
  </a-popconfirm>
  <a-spin :spinning="loading">
    <div v-if="dataList.length > 0" v-for="item in dataList">
      <div style="display: flex; margin-top: 20px;">
        <h2 style="font-weight: bold">平台SKU：{{item[0]?.productSku}}</h2>
        <a-button type="primary" style="margin-left: 20px;" @click="openReviewModal(item[0]?.productSku)">重新审单</a-button>
      </div>
      <CommonTable :columns="columns" :data-source="item"></CommonTable>
    </div>
    <div v-else >
      <a-empty />
    </div>
  </a-spin>
  <a-modal v-model:open="open" title="库存匹配条件" @cancel="handleCancel">
    <a-form>
      <a-form-item label="SKU">
        <a-input v-model:value="modalState.productSku" disabled></a-input>
      </a-form-item>
      <a-form-item label="库存池">
        <a-input v-model:value="modalState.poolCode"></a-input>
      </a-form-item>
      <a-form-item label="版本">
        <a-input v-model:value="modalState.versionCode"></a-input>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button type="primary" @click="handleOk" :loading="btnLoading">重新审单</a-button>
      <a-button type="primary" @click="handleCancel">取消</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import {
  cleanItemAndVerify,
  clearAndVerify,
  getInventoryPoolList,
  getLogisticsDetail
} from "@/api/inventoryPools/performanceReview.js";
import CommonTable from "@/components/commonTable/index.vue";
import {ref} from "vue";
import {message} from "ant-design-vue";
const columns = [
  {
    title:'平台SKU',
    dataIndex:'productSku',
    align:'center',
  },
  {
    title:'仓库SKU',
    dataIndex:'warehouseSku',
    align:'center',
  },
  {
    title:'数量',
    dataIndex:'qty',
    align:'center',
  },
  {
    title:'库存池',
    dataIndex:'poolCode',
    align:'center',
  },
  {
    title:'仓库',
    dataIndex:'warehouseCode',
    align:'center',
  },
  {
    title:'上架ETA',
    dataIndex:'sellableDate',
    align:'center',
  },
  {
    title:'版本',
    dataIndex:'chVerion',
    align:'center',
  },
  {
    title:'物流服务',
    dataIndex:'productSku',
    align:'center',
  },
]
const modalState = reactive({
  productSku:'',
  poolCode:'',
  versionCode:''
})
const open = ref(false)
const dataList = ref([])
const tableDataArr = ref([])
const info = ref({})
const loading = ref(false)
const infoLoading = ref(false)
const btnLoading = ref(false)
const props = defineProps({
  orderId:{
    type: String,
    required: true
  }
})
const initInfo = async () => {
  try{
    infoLoading.value = true
    const res = await getLogisticsDetail({saleOrderCode: props.orderId})
    info.value = res.result
  }catch (e){
    message.error(e)
  }finally {
    infoLoading.value = false
  }
}
const confirm = async () => {
  try {
    const res = await clearAndVerify({saleOrderCode: props.orderId})
    message.success('清除并重新审单成功')
    loadData()
  }catch (e){
    message.error(e)
  }
}
const initDetail = async () => {
  try {
    loading.value = true
    dataList.value = []
    const res = await getInventoryPoolList({saleOrderCode: props.orderId})
    tableDataArr.value = res.result.records
    let productArr = [...new Set(res.result.records.map(item => item.productSku))]
    for (let i = 0; i < productArr.length; i++) {
      dataList.value.push([])
      for (let j = 0; j < tableDataArr.value.length; j++) {
        if(tableDataArr.value[j].productSku === productArr[i]){
          dataList.value[i].push(tableDataArr.value[j])
        }
      }
    }
  }catch(e){
    console.log(e)
    message.error(e)
  }finally {
    loading.value = false
  }
}
const openReviewModal = (sku) => {
  console.log(sku)
  open.value = true
  modalState.productSku = sku
}
const handleOk = async (item) => {
  try {
    btnLoading.value = true
    const res = await cleanItemAndVerify({
      saleOrderCode: props.orderId.trim(),
      productSku: modalState.productSku.trim(),
      poolCode: modalState.poolCode.trim(),
      versionCode: modalState.versionCode.trim()
    })
    message.success('重新审单成功')
    open.value = false
    modalState.productSku = ''
    modalState.poolCode = ''
    modalState.versionCode = ''
    loadData()
  }catch (e){
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}
const handleCancel = () => {
  open.value = false
  modalState.productSku = ''
  modalState.poolCode = ''
  modalState.versionCode = ''
}
const loadData = () => {
  initInfo()
  initDetail()
}
onMounted(() => {
  loadData()
})

const emit = defineEmits(['out'])
const goOut = () => {
  emit('out')
}

</script>
<style scoped>

</style>
